<template>
  <div class="profile-container">
    <t-navbar title="我的详情" :fixed="true"/>
    <!-- 个性化顶部区域 -->
    <div class="profile-header">
      <div class="header-content">
        <div class="user-info">
          <t-avatar :image="detail.imageurl || 'https://tdesign.gtimg.com/mobile/demos/avatar_1.png'" size="large" class="user-avatar"/>
          <div class="user-meta">
            <div class="user-name">{{ detail.nickname || '用户昵称' }}</div>
            <div class="user-tags">
              <t-tag shape="mark" variant="light" theme="primary" size="small">{{ detail.sex || '男' }}</t-tag>
              <t-tag shape="mark" variant="light" theme="success" size="small" v-if="detail.isCertified">已认证</t-tag>
              <t-tag shape="mark" variant="light" theme="warning" size="small" v-else>未认证</t-tag>
            </div>
            <div class="user-bio">{{ detail.info || '这个人很懒，什么都没有留下...' }}</div>
          </div>
        </div>
        
        <div class="action-buttons">
          <t-button 
            theme="primary" 
            shape="round" 
            size="small" 
            variant="outline"
            @click="tz('/userInfo')"
            class="edit-btn"
          >
            <icon-font name="edit" /> 编辑资料
          </t-button>
        </div>
      </div>

      <!-- 用户数据展示 -->
      <div class="user-stats-panel">
        <div class="stat-item" @click="tz('/follows')">
          <div class="stat-value">{{ detail.followCount || 128 }}</div>
          <div class="stat-label">关注</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item" @click="tz('/fans')">
          <div class="stat-value">{{ detail.fansCount || 256 }}</div>
          <div class="stat-label">粉丝</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item" @click="tz('/points')">
          <div class="stat-value">{{ detail.points || 98 }}</div>
          <div class="stat-label">积分</div>
        </div>
      </div>
    </div>

    <!-- 会员等级展示 -->
    <div class="vip-card" v-if="detail.isCertified">
      <div class="vip-info">
        <div class="vip-icon">
          <icon-font name="crown" />
        </div>
        <div class="vip-content">
          <div class="vip-title">专业陪诊师 <span class="vip-level">Lv.3</span></div>
          <div class="vip-desc">已帮助 126 位患者提供陪诊服务</div>
        </div>
      </div>
      <div class="vip-progress">
        <div class="progress-text">距离下一等级还需 <span class="highlight">4</span> 次服务</div>
        <t-progress :percentage="70" :stroke-width="4" :color="['#36cfc9', '#52c41a']" />
      </div>
    </div>
    
    <div class="vip-card non-vip" v-else @click="tz('/becomeCompanion')">
      <div class="vip-info">
        <div class="vip-icon">
          <icon-font name="user-add" />
        </div>
        <div class="vip-content">
          <div class="vip-title">成为专业陪诊师</div>
          <div class="vip-desc">通过认证后可接单提供陪诊服务</div>
        </div>
      </div>
      <div class="action-arrow">
        <icon-font name="chevron-right" />
      </div>
    </div>

    <!-- 服务数据看板 -->
    <div class="data-dashboard">
      <div class="section-title">
        <span>服务数据</span>
        <t-button variant="text" size="small" class="view-more" @click="tz('/service-data')">查看更多</t-button>
      </div>
      
      <div class="dashboard-grid">
        <div class="dashboard-item">
          <div class="dashboard-icon">
            <icon-font name="calendar" />
          </div>
          <div class="dashboard-content">
            <div class="dashboard-value">{{ detail.serviceHours || '28.5' }} <span class="unit">小时</span></div>
            <div class="dashboard-title">本月服务时长</div>
          </div>
        </div>
        
        <div class="dashboard-item">
          <div class="dashboard-icon income-icon">
            <icon-font name="coin" />
          </div>
          <div class="dashboard-content">
            <div class="dashboard-value">{{ detail.totalIncome || '8,888' }} <span class="unit">元</span></div>
            <div class="dashboard-title">累计收入</div>
          </div>
        </div>
        
        <div class="dashboard-item">
          <div class="dashboard-icon rating-icon">
            <icon-font name="star" />
          </div>
          <div class="dashboard-content">
            <div class="dashboard-value">{{ detail.rating || '4.9' }}</div>
            <div class="dashboard-title">服务评分</div>
          </div>
        </div>
        
        <div class="dashboard-item">
          <div class="dashboard-icon order-icon">
            <icon-font name="shop" />
          </div>
          <div class="dashboard-content">
            <div class="dashboard-value">{{ detail.orderCount || '42' }} <span class="unit">单</span></div>
            <div class="dashboard-title">总订单数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单状态追踪 -->
    <div class="order-tracking">
      <div class="section-title">
        <span>订单追踪</span>
        <t-button variant="text" size="small" class="view-more" @click="tz('/orders')">全部订单</t-button>
      </div>
      
      <div class="order-status-grid">
        <div
          v-for="(item, index) in orderStatus"
          :key="index"
          class="status-item"
          @click="tz(item.path)"
        >
          <div class="status-icon" :style="{ background: item.gradient }">
            <icon-font :name="item.icon" />
          </div>
          <div class="status-badge" v-if="item.value > 0">{{ item.value }}</div>
          <div class="status-label">{{ item.label }}</div>
        </div>
      </div>
    </div>

    <!-- 系统公告 -->
    <t-swiper autoplay :duration="3000" navigation-type="dots-bar" class="notice-swiper">
      <t-swiper-item v-for="(notice, idx) in notices" :key="idx">
        <div class="notice-card" @click="tz(notice.link)">
          <div class="notice-icon" :style="{ background: notice.bgColor }">
            <icon-font :name="notice.icon" />
          </div>
          <div class="notice-content">
            <div class="notice-title">{{ notice.title }}</div>
            <div class="notice-desc">{{ notice.content }}</div>
          </div>
          <div class="notice-arrow">
            <icon-font name="chevron-right" />
          </div>
        </div>
      </t-swiper-item>
    </t-swiper>

    <!-- 常用功能 -->
    <div class="features">
      <div class="section-title">
        <span>我的服务</span>
      </div>
      
      <div class="feature-grid">
        <div
          v-for="(item, index) in functions"
          :key="index"
          class="feature-item"
          @click="tz(item.path)"
        >
          <div class="feature-icon" :style="{ background: item.gradient }">
            <icon-font :name="item.icon" />
          </div>
          <div class="feature-title">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <!-- 底部安全退出 -->
    <div class="logout-section">
      <t-button
        block
        theme="danger"
        variant="outline"
        shape="round"
        class="logout-btn"
        @click="logout"
      >
        <icon-font name="poweroff" />
        退出
      </t-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const token = ref(sessionStorage.getItem("token"));
const detail = ref({
  isCertified: true,
  // 其他字段...
});

// 订单状态数据
const orderStatus = ref([
  { 
    icon: "creditcard", 
    value: 8, 
    label: "待支付", 
    gradient: "linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)",
    path: "/orders/unpaid"
  },
  { 
    icon: "service", 
    value: 2, 
    label: "待服务", 
    gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    path: "/orders/pending"
  },
  { 
    icon: "edit", 
    value: 3, 
    label: "待评价", 
    gradient: "linear-gradient(135deg, #fdcb6e 0%, #e17055 100%)",
    path: "/orders/unrated"
  },
  { 
    icon: "check-circle", 
    value: 4, 
    label: "已完成", 
    gradient: "linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)",
    path: "/orders/completed"
  }
]);

// 功能导航
const functions = ref([
  { 
    icon: "article", 
    title: "我的动态", 
    path: "/posts", 
    gradient: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
  },
  { 
    icon: "user", 
    title: "就诊人", 
    path: "/patients", 
    gradient: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
  },
  { 
    icon: "wallet", 
    title: "钱包", 
    path: "/wallet", 
    gradient: "linear-gradient(135deg, #f6d365 0%, #fda085 100%)"
  },
  { 
    icon: "heart", 
    title: "我的收藏", 
    path: "/favorites", 
    gradient: "linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%)"
  },
  { 
    icon: "location", 
    title: "地址管理", 
    path: "/addresses", 
    gradient: "linear-gradient(135deg, #0fd850 0%, #f9f047 100%)"
  },
  { 
    icon: "check-circle", 
    title: "健康档案", 
    path: "/health-records", 
    gradient: "linear-gradient(135deg, #5ee7df 0%, #b490ca 100%)"
  },
  { 
    icon: "customer-service", 
    title: "联系客服", 
    path: "/support", 
    gradient: "linear-gradient(135deg, #b721ff 0%, #21d4fd 100%)"
  },
  { 
    icon: "info-circle", 
    title: "关于我们", 
    path: "/about", 
    gradient: "linear-gradient(135deg, #60a3bc 0%, #0c2461 100%)"
  }
]);

// 系统公告
const notices = ref([
  {
    title: "认证有礼",
    content: "完成身份认证立得50积分！",
    icon: "gift",
    bgColor: "#ffb8b8",
    link: "/certification"
  },
  {
    title: "新人专享",
    content: "首次下单享受8折优惠",
    icon: "discount",
    bgColor: "#a1c4fd",
    link: "/new-user"
  },
  {
    title: "邀请好友",
    content: "邀请好友注册，双方各得20积分",
    icon: "user-add",
    bgColor: "#d4fc79",
    link: "/invite"
  }
]);

// 检查用户是否登录
const checkLogin = () => {
  if (!token.value) {
    router.push("/login"); // 未登录时重定向到登录页面
  }
};

// 初始化数据
onMounted(() => {
  checkLogin(); // 检查登录状态
  if (sessionStorage.getItem("detail")) {
    detail.value = JSON.parse(sessionStorage.getItem("detail"));
    console.log(detail.value);
  }
});

// 退出登录
const logout = () => {
  sessionStorage.clear();
  localStorage.clear();
  router.push("/login");
};

// 页面跳转
const tz = (route: string) => {
  router.push(route);
};
</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 30px;
}

/* 顶部用户信息区域 */
.profile-header {
  background: linear-gradient(to bottom, #6a11cb 0%, #2575fc 100%);
  padding: 20px 16px 0;
  border-radius: 0 0 24px 24px;
  color: white;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 70px;
  height: 70px;
  border: 0px solid rgba(255, 255, 255, 0.564);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.user-meta {
  margin-left: 16px;
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.user-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.user-bio {
  font-size: 12px;
  opacity: 0.8;
  max-width: 200px;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
}

.setting-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
}

/* 用户数据面板 */
.user-stats-panel {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  margin: 0 8px;
  position: relative;
  top: 25px;
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stat-item {
  flex: 1;
  text-align: center;
  position: relative;
}

.stat-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.8;
}

/* VIP卡片 */
.vip-card {
  margin: 35px 16px 16px;
  background: linear-gradient(135deg, #fad961 0%, #f76b1c 100%);
  border-radius: 16px;
  padding: 16px;
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.non-vip {
  background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vip-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.vip-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 20px;
}

.vip-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.vip-level {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.3);
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

.vip-desc {
  font-size: 12px;
  opacity: 0.9;
}

.vip-progress {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px;
}

.progress-text {
  margin-bottom: 8px;
  font-size: 12px;
}

.highlight {
  font-weight: 600;
  font-size: 14px;
}

.action-arrow {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

/* 数据看板 */
.data-dashboard {
  margin: 16px;
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.view-more {
  color: #666;
  font-size: 12px;
  font-weight: normal;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dashboard-item {
  background: #f8f9fe;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.dashboard-item::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0 0 0 30px;
}

.dashboard-icon {
  width: 40px;
  height: 40px;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #667eea;
  font-size: 22px;
}

.income-icon {
  background: rgba(246, 211, 101, 0.1);
  color: #f6d365;
}

.rating-icon {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

.order-icon {
  background: rgba(67, 233, 123, 0.1);
  color: #43e97b;
}

.dashboard-content {
  flex: 1;
}

.dashboard-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.unit {
  font-size: 12px;
  font-weight: normal;
  color: #999;
  margin-left: 2px;
}

.dashboard-title {
  font-size: 12px;
  color: #666;
}

/* 订单状态 */
.order-tracking {
  margin: 16px;
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.order-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.status-item {
  text-align: center;
  position: relative;
}

.status-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  color: white;
  font-size: 22px;
  transition: transform 0.3s;
}

.status-item:active .status-icon {
  transform: scale(0.95);
}

.status-badge {
  position: absolute;
  top: -5px;
  right: 25%;
  background: #ff4d4f;
  color: white;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 12px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-label {
  font-size: 12px;
  color: #666;
}

/* 公告轮播 */
.notice-swiper {
  margin: 16px;
  border-radius: 16px;
  overflow: hidden;
  height: 80px;
}

.notice-card {
  display: flex;
  align-items: center;
  background: white;
  padding: 16px;
  height: 80px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.notice-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  font-size: 20px;
}

.notice-content {
  flex: 1;
}

.notice-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.notice-desc {
  font-size: 12px;
  color: #666;
}

.notice-arrow {
  margin-left: 8px;
  color: #999;
}

/* 功能导航 */
.features {
  margin: 16px;
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.feature-item {
  text-align: center;
  padding: 12px 0;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  color: white;
  font-size: 24px;
  transition: transform 0.3s;
}

.feature-item:active .feature-icon {
  transform: scale(0.95);
}

.feature-title {
  font-size: 12px;
  color: #666;
}

/* 退出按钮 */
.logout-section {
  margin: 30px 16px 16px;
}

.logout-btn {
  height: 48px;
  font-size: 16px;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.profile-header, .vip-card, .data-dashboard, 
.order-tracking, .notice-swiper, .features, .logout-section {
  animation: fadeIn 0.5s ease-out;
}

.dashboard-item, .status-item, .feature-item {
  animation: fadeIn 0.5s ease-out forwards;
}

.dashboard-item:nth-child(1) { animation-delay: 0.1s; }
.dashboard-item:nth-child(2) { animation-delay: 0.2s; }
.dashboard-item:nth-child(3) { animation-delay: 0.3s; }
.dashboard-item:nth-child(4) { animation-delay: 0.4s; }

.status-item:nth-child(1) { animation-delay: 0.1s; }
.status-item:nth-child(2) { animation-delay: 0.2s; }
.status-item:nth-child(3) { animation-delay: 0.3s; }
.status-item:nth-child(4) { animation-delay: 0.4s; }

.feature-item:nth-child(1) { animation-delay: 0.1s; }
.feature-item:nth-child(2) { animation-delay: 0.15s; }
.feature-item:nth-child(3) { animation-delay: 0.2s; }
.feature-item:nth-child(4) { animation-delay: 0.25s; }
.feature-item:nth-child(5) { animation-delay: 0.3s; }
.feature-item:nth-child(6) { animation-delay: 0.35s; }
.feature-item:nth-child(7) { animation-delay: 0.4s; }
.feature-item:nth-child(8) { animation-delay: 0.45s; }
</style>